<template>
  <div class="category-contain">
      <!-- <div class="header bg-grey">
        <div class="header-left">
            <div class="back" @click="handleReturn">
                <i class="i-left"></i>
            </div>
        </div>
        <div class="header-middle m-l-12"></div>
        <div class="header-right">
          <button class="btn-order" v-if="channelId==9" @click="handleOrder">查看订单</button>
        </div>
      </div> -->
      <div class="category-pannel">
          <div class="category-pannel__left" ref="tabPanel" :style="tabPanelStyle">
              <div class="tab-box" :style="tabBoxStyle">
                  <div class="tab" v-for="(val,k) in tabList" v-bind:class="active== k?'tab active':'tab'" @click="handleTab(k,val)">{{val.name}}</div>
              </div>
          </div>
          <div class="category-pannel__right">
              <div class="tab-title">{{tabTitle}}</div>
              <div class="tab-discount" v-if="channelId==9"> <img :src="discountUrl" > </div>
              <van-pull-refresh v-model="isDownLoading" @refresh="onRefresh">
                  <van-list v-model="isUploading" :finished="finished"  :finished-text="finished_text" @load="onLoad" :offset=10>
                      <div class="goods__item" v-for="val in list" @click="handleDetail(val.id,0)">
                          <div class="goods__item__left">
                              <img v-lazy="imageShow(val.primary_pic_url)">
                          </div>
                          <div class="goods__item__right">
                              <div class="title">{{val.name}}</div>
                              <div class="discount-icon">
                                  <img :src="sendBdcUrl" v-if="channelId!=9">
                              </div>
                              <div class="discount" >
                                  <span><span class="money">￥</span>{{val.promotionalPrice ? val.promotionalPrice:val.retail_price}}</span>
                                  <span class="discount-tag" v-if="val.promotionalPrice">{{val.promotionalDiscount}}折价</span>
                              </div>
                              <div class="merge" v-if="val.fightGroupPrice">
                                  <span><span class="money">￥</span>{{val.fightGroupPrice}}</span>
                                  <span class="merge-tag">折后拼单价</span>
                              </div>
                              <div class="salse">
                                  <div class="salse-left">
                                      <span v-if="val.promotionalPrice"><del>￥{{val.retail_price}}</del></span>
                                      <span v-else>
                                          <del>￥{{val.market_price}}</del>
                                      </span>
                                      <span class="tag">包邮</span>
                                  </div>
                                  <span>已售{{val.sell_volume ? val.sell_volume : 0}}件</span>
                              </div>
                          </div>
                      </div>
                  </van-list>
              </van-pull-refresh>
          </div>
      </div>
  </div>
</template>

<script>
import { autoLogin } from '@/utils' 
import { getCategory, search } from '@/api/goods'
import BScroll from 'better-scroll'
export default {
  name: "category",
  data() {
      return {
          tabPanelStyle: {
              height: "640px"
          },
          tabBoxStyle: {
              height: "1000px"
          },
          channelId: 0,
          placeholder: '金丝玉',
          active: 0,
          tabList: [],
          tabChildList: [],
          tabTitle: '',
          isDownLoading: false,
          isUploading: true,
          finished: false,
          finished_text: '没有更多了',
          list: [],
          totalPages: 1,
          isFirst: true,
          isTabFirst: true,
          firstParentId: -1,
          query: {
              page: 1,
              limit: 10,
              category_id: '',
              channelId: '',
              order: "asc",
              sidx: "id"
          },
          sendBdcUrl: 'https://images.bdchats.com/prod/upload/product_discount.png',
          discountUrl: 'https://images.bdchats.com/prod/upload/member_discount.png'
      }
  },
  mounted () {
      this.scroll = new BScroll(this.$refs.tabPanel, {
          click: true,
          // 上拉加载
          pullUpLoad: {
              // 当上拉距离超过30px时触发 pullingUp 事件
              threshold: -50
          },
      })
      this.scroll.on('pullingUp', () => {
          console.log('处理上拉加载操作')
          setTimeout(() => {
              // 事情做完，需要调用此方法告诉 better-scroll 数据已加载，否则上拉事件只会执行一次
              this.scroll.finishPullUp()
          }, 2000)
      })
  },
  created() {
      autoLogin()
      this.tabPanelStyle.height = window.innerHeight+'px';
      this.tabBoxStyle.height = window.innerHeight+300+'px';
      this.channelId = this.$route.query.channelId
      const parentId = this.channelId ?  1036089 :sessionStorage.getItem('categoryId')
      this.query.channelId = this.channelId ? this.channelId: ''
      this.getCategoryList(parentId,'L2')
      // this.query.category_id = parentId
  },
  methods: {
      handleReturn() {
          if(this.channelId) {
              this.$bridge.call('close')
          } else {
              this.$router.go(-1)
          }
      },
      handleOrder() {
          this.$router.push('/user/order?channelId=9')
      },
      handleSearch() {
          sessionStorage.setItem('searchText',this.placeholder)
          this.$router.push('/search')
      },
      handleTab(index, row) {
          console.log(1111)
          this.active = index
          this.tabTitle = row.name
          this.tabChildList = []
          // this.getCategoryList(row.id, 'L2')
          this.handleGoodsList(row.id)
      },
      imageShow(src){
          const img = {}
          img.loading = require('@/assets/images/loading.gif');
          img.src = src;
          return img
      },
      handleDetail(id,isSpike) {
          sessionStorage.setItem('isSpike',isSpike)
          this.$router.push('/detail/'+id)
      },
      getCategoryList(parentId, level) {
          const self = this
          const data = {}
          data.page = 1
          data.limit = 10
          data.parentId = parentId
          data.level = level
          data.sidx = ''
          getCategory(data).then(response => {
              if (response.data && response.data.length > 0) {
                  this.tabBoxStyle.height = response.data.length * 40 + 80 +'px';
                  for(const item of response.data) {
                      const temp = {}
                      temp.id = item.id
                      temp.name = item.name
                      temp.picUrl = item.picUrl
                      temp.type = item.type
                      self.tabList.push(temp)
                      if (this.isTabFirst===true) {
                          this.tabTitle = item.name
                          this.handleGoodsList(item.id)
                          this.isTabFirst = false
                      }
                  }
              } else {
                  this.handleGoodsList(0)
              }
          })
      },
      handleGoodsList(categoryId) {
          this.list = []
          this.finished = false
          this.isUploading = false
          this.isFirst = true
          this.totalPages = 1
          this.query.page = 1
          this.query.category_id = categoryId
          this.getList()

      },
      async getList(){
          await search(this.query).then(response => {
              if(this.isFirst){
                  this.isFirst = false
                  this.totalPages =response.data.pageUtil.totalPage
              }
              if(this.list.length) {
                  if (this.isUploading) { //上拉加载
                      for (const item of response.data.pageUtil.list) {
                          this.list.push(item)
                      }
                      this.$nextTick(() => {
                          this.isUploading = false
                      })
                      if (this.list.length >= response.data.pageUtil.totalCount) {
                          this.finished = true
                      }
                  }

                  if (this.isDownLoading) { //关闭下拉刷新
                      this.isDownLoading = false
                      this.list = [];
                      for (const item of response.data.pageUtil.list) {
                          this.list.push(item)
                      }
                      if (this.finished) {
                          this.finished = false
                      }
                  }
              }
              else{
                  if(response.data.pageUtil.list) {
                      const dataList = response.data.pageUtil.list
                      for( const item of dataList){
                          this.list.push(item)
                      }
                      if(response.data.pageUtil.totalCount === 0) {
                          this.finished_text = "暂无数据"
                          this.finished = true
                      }
                  }
                  this.isUploading = false
                  this.isDownLoading = false
              }
          })
      },
      onLoad() {
          if(this.isFirst === true) {
              this.getList()
          }  else {
              if(this.query.page < this.totalPages) {
                  this.query.page = this.query.page + 1
                  this.isUploading = true
                  this.getList()
              }else{
                  this.finished = true
                  this.isDownLoading = false
                  this.isUploading = false
              }
          }
      },
      onRefresh() {
          this.finished = false
          this.isUploading = false
          this.query.page = 1
          this.list = []
          this.getList()
      }
  }
}
</script>

<style scoped>

</style>